<template>
  <div class="map-popup-simple-root">
    <el-tabs>
      <el-tab-pane v-for="(group,index) in data" :key="index" :label="group.title">
        <div class="data-content">
          <div class="data-item" v-for="(item,ind) in group.data" :key="ind">
            <div class="item-label">{{item.label}}</div>
            <div class="item-value">{{item.value}}</div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import { reactive, toRefs, onMounted, ref, watch, computed } from '@vue/composition-api'

  export default {
    name: 'map-popup',
    props: {
      data: {
        type: Array,
        default: () => {
          return [{
            title: '数据1',
            data: [{ label: '姓名', value: '张三' }, { label: '性别', value: '女' }, { label: '年龄', value: '28' }]
          },
            {
              title: '数据2',
              data: [{ label: '姓名', value: '刘备' }, { label: '性别', value: '女' }, { label: '年龄', value: '28' }]
            }]
        }
      }
    },
    setup(props, content) {
      let data = reactive({})
      return { ...toRefs(data) }
    }
  }
</script>

<style scoped lang="scss">
  .map-popup-simple-root {
    .data-content {
      display: flex;
      flex-wrap: wrap;
      font-size: 18px;
      color: #2b333f;
      justify-content: space-between;

      .data-item {
        flex: 0 0 170px;
        display: flex;
        align-items: flex-end;


        .item-label {
          flex: 0 0 80px;
        }

        .item-value {
          flex: 0 0 90px;
          border-bottom: 1px green solid;
        }
      }
    }
  }
</style>
